<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="false"
      @scroll="scroll"
      :refresher-enabled="false"
    >
      <template #empty>
        <yy-empty></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore text=""> </yy-nomore>
      </template>
      <template #top>
        <u-navbar
          :is-back="false"
          class="fixed z-50 bg-transparent"
          :background="{ backgroundColor: isScroll ? '#fff' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="flex justify-between items-center px-4 w-full">
            <view class="col-span-1" @click="returnToPage(false)">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" v-if="isScroll" />
              <image src="/static/dddr129.png" mode="aspectFill" class="size-6" v-else />
            </view>
            <view class="col-span-1"></view>
            <view @click="showShare = true" class="flex col-span-1 justify-end">
              <u-icon
                name="more-dot-fill"
                :color="!isScroll ? '#fff' : '#000'"
                class="font-bold rotate-90"
                size="33"
              ></u-icon>
            </view>
          </view>
        </u-navbar>
      </template>
      <view class="flex flex-col gap-2">
        <!-- -->
        <view class="relative" @click="previewImage">
          <view
            class="aspect-square bg-center bg-no-repeat bg-cover"
            :style="{ backgroundImage: `url(${d?.images?.[currentImage]})` }"
          ></view>
          <view class="" style="background-image: url('')"></view>
          <image src="/static/dddr130.png" mode="widthFix" class="absolute bottom-0 left-0 z-20 w-full" />
        </view>
        <!-- </view> 66-->
        <view class="flex z-40 flex-col gap-2 -mt-[12.5rem]">
          <!-- 相册 -->
          <view class="px-4">
            <view class="inline-flex items-center bg-[#171B24] rounded-full p-1">
              <view
                class="rounded-[.625rem] px-2 font-medium"
                :class="k == currentImage ? 'bg-[#FFFFFF]  text-[#171B24]' : 'text-white/80'"
                v-for="(i, k) in ['封面', '环境图', '渔获图', '相册 >']"
                @click="switchImages(k)"
                :key="k"
              >
                <view class="text-[.6875rem]"> {{ i }} </view>
              </view>
            </view>
          </view>

          <!-- 名称信息 -->
          <view class="px-4">
            <view class="bg-[#E1EBF1] rounded-[.75rem]">
              <view class="flex justify-between items-center p-4 py-1" @click="goToHisHomepage">
                <view class="flex gap-1 items-center">
                  <view class="size-6 overflow-hidden rounded-full border">
                    <image :src="vk.myfn.handleImageUrl(d?.user?.avatar)" mode="aspectFill" class="size-full" />
                  </view>
                  <view class="text-[.75rem] text-[#161A24] line-clamp-1">{{ d?.user?.nickname || '-' }}</view>
                </view>
                <view class="text-[.625rem] text-[#8E9299] whitespace-nowrap" v-if="!d?.to_blacklist">
                  发布于
                  {{ vk.myfn.getTimeAgo(d.create_time) }}
                </view>
              </view>
              <view class="flex flex-col gap-3 py-4 bg-[#FFFFFF] rounded-[.75rem] relative">
                <view class="flex flex-col">
                  <view class="flex flex-col px-4">
                    <view class="flex gap-3 justify-between items-baseline">
                      <view class="font-semibold text-[1.25rem] text-[#171B24]">{{ d?.name }}</view>
                      <view class="flex gap-1 items-center">
                        <image src="/static/dddr85.png" class="h-[1rem]" v-if="d.basan_type == 1" mode="heightFix" />
                        <image src="/static/dddr83.png" class="h-[1rem]" v-if="d.basan_type == 2" mode="heightFix" />
                        <image src="/static/dddr87.png" class="h-[1rem]" v-if="d.is_paid_spot == 1" mode="heightFix" />
                      </view>
                    </view>

                    <view class="flex gap-1 items-baseline">
                      <view class="flex relative justify-end">
                        <view
                          class="bg-gradient-to-r from-[#FFBF3A]/30 to-white h-[.375rem] w-[115%] l absolute rounded-[.1875rem] bottom-1 z-20"
                        >
                        </view>
                        <view class="flex relative z-20 items-baseline gap-[0.0625rem]">
                          <text class="text-[1.25rem] text-[#002021] font-bold font-[oxanium]">{{
                            (d.score || 0).toFixed(1)
                          }}</text>
                          <text class="text-[.625rem] text-[#002021]">分</text>
                        </view>
                      </view>
                      <u-rate :count="5" v-model="value" size="25" active-color="#FFBF3A"></u-rate>
                      <view
                        class="flex gap-1 items-center"
                        @click="vk.navigateTo(`/pages/my/soldList?id=${d?.id}`)"
                        v-if="vk.getVuex('$user.userInfo.id') == d?.user?.id && d?.is_paid_spot"
                      >
                        <view class="h-[.5rem] border-solid border-[#A5A9B0] border-l-[.0625rem]"></view>
                        <view class="flex gap-1 items-center">
                          <view class="text-[.6875rem] text-[#8E9299]"> 已售{{ d.sold_count }}</view>
                          <image src="/static/dddr124.png" mode="aspectFill" class="size-3" />
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="flex flex-col px-3">
                    <view class="text-[.75rem] text-[#5C6068] relative">
                      {{ d.description }}
                      <image src="/static/dddr38.png" class="size-6 absolute top-0 right-0" mode="aspectFill" />
                    </view>
                  </view>
                </view>
                <view class="py-1 w-full bg-gradient-to-r to-transparent from-[#E5F6F6] pl-[4.28rem] relative">
                  <image src="/static/dddr84.png" class="h-[1.35rem] absolute -left-3 top-[.125rem]" mode="heightFix" />
                  <view class="text-[.6875rem] text-[#161A24] flex-wrap">
                    <text v-for="(i, k) in d?.ext?.fish_species" :key="k">
                      {{ i?.name }}{{ k !== d?.ext?.fish_species.length - 1 ? '、 ' : '' }}
                    </text>
                  </view>
                </view>

                <view class="px-4">
                  <view
                    class="flex flex-col rounded-[.75rem] bg-no-repeat bg-cover bg-center justify-between overflow-hidden"
                    :style="{ backgroundImage: `url(${vk.myfn.handleImageUrl(d?.weather?.lives[0]?.card_bg)})` }"
                    @click="to7DayWeather"
                  >
                    <view class="flex flex-grow justify-between items-center px-3 py-2">
                      <view class="flex gap-2 items-center font-bold">
                        <view class="size-[2rem] rounded-full">
                          <u-image
                            :src="vk.myfn.handleImageUrl(d?.weather?.lives[0]?.card_icon)"
                            class="!size-full"
                            mode="aspectFill"
                          />
                        </view>
                        <view class="flex gap-1 items-baseline">
                          <view class="flex items-end">
                            <view class="text-[1.5rem] text-[#161A24] leading-none">
                              {{ d?.weather?.lives[0].temperature }}
                            </view>
                            <view class="text-[.75rem] text-[#161A24]"> °C </view>
                          </view>
                          <view class="text-[.8125rem] text-[#5C6068]"> {{ d?.weather?.lives[0].weather }} </view>
                        </view>
                      </view>
                      <!-- v-if="!d.is_paid_spot || (d.is_paid_spot && d.is_paid)" -->
                      <view class="flex gap-1 items-center">
                        <view class="text-[.6875rem] text-[#00A9AB]"> 👉近7日天气 </view>
                        <u-icon class="" name="arrow-right" color="#00A9AB" size="20"></u-icon>
                      </view>
                    </view>
                    <!--  -->
                    <view class="flex justify-around items-center bg-[#F6F9FE] px-3 py-2">
                      <view class="flex gap-1 items-center">
                        <view class="text-[.625rem] text-[#8E9299]"> 空气: </view>
                        <view class="text-[.625rem] text-[#5C6068]"> {{ d?.weather?.lives[0]?.aqi || '-' }} </view>
                      </view>
                      <view class="h-[.5rem] border-[.0625rem] border-solid border-l-[#A5A9B0]"> </view>
                      <view class="flex gap-1 items-center">
                        <view class="text-[.625rem] text-[#8E9299]"> 风速: </view>
                        <view class="text-[.625rem] text-[#5C6068]">
                          {{ d?.weather?.lives[0]?.winddirection || '-' }}
                        </view>
                      </view>
                      <view class="h-[.5rem] border-[.0625rem] border-solid border-l-[#A5A9B0]"> </view>
                      <view class="flex gap-1 items-center">
                        <view class="text-[.625rem] text-[#8E9299]"> 湿度: </view>
                        <view class="text-[.625rem] text-[#5C6068]"> {{ d?.weather?.lives[0]?.humidity || '-' }}%</view>
                      </view>
                      <view class="h-[.5rem] border-[.0625rem] border-solid border-l-[#A5A9B0]"> </view>
                      <view class="flex gap-1 items-center">
                        <view class="text-[.625rem] text-[#8E9299]"> 气压: </view>
                        <view class="text-[.625rem] text-[#5C6068]">
                          {{ d?.weather?.lives[0]?.pressure || '-' }} hPa
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 钓点位置 -->
          <view class="px-4">
            <view class="flex flex-col gap-4 p-4 bg-[#FFFFFF] rounded-[.75rem]">
              <view class="flex justify-between items-center">
                <view class="font-semibold text-[1rem] text-[#171B24]">钓点位置</view>
                <view class="text-[.6875rem] text-[#606368]" v-if="d?.distance">距离我{{ d?.distance || '-' }}</view>
              </view>
              <view class="flex gap-3 items-center h-[5.5rem]">
                <!-- 视频 -->
                <view class="w-[4.125rem] rounded-[.5rem] bg-[#F4F6F8] h-full overflow-hidden relative">
                  <u-image
                    :src="`${d?.video}?x-oss-process=video/snapshot,t_10,f_jpg`"
                    class="!size-full"
                    mode="aspectFill"
                    @click="fullScreenPlayback(d?.video)"
                    borderRadius="0.5rem"
                  />
                  <view
                    class="w-full h-[1.125rem] bg-[#000000] flex items-center justify-center absolute bottom-0 left-0 z-50"
                  >
                    <view class="font-medium text-[.625rem] text-[#FFFFFF]"> 视频指路 </view>
                  </view>
                  <view
                    class="paid-overlay flex absolute inset-0 justify-center items-center"
                    v-if="d.is_paid_spot && !d.is_paid && vk.getVuex('$user.userInfo.id') !== d?.user?.id"
                  >
                    <image src="/static/dddr104.png" class="size-5 relative z-10" mode="aspectFill" />
                  </view>
                </view>
                <!-- 地图 -->
                <view class="flex-1 relative h-full rounded-[.5rem] overflow-hidden">
                  <image src="/static/dddr115.png" class="size-full" mode="aspectFill" @click="goHere" />
                  <view
                    class="paid-overlays flex overflow-hidden absolute inset-0 flex-col gap-1 justify-center items-center"
                    v-if="d.is_paid_spot && !d.is_paid && vk.getVuex('$user.userInfo.id') !== d?.user?.id"
                    @click="buyNow"
                  >
                    <image src="/static/dddr25.png" class="size-5 relative z-10" mode="aspectFill" />
                    <view class="flex z-10 gap-1 items-center">
                      <view class="flex gap-1 items-center">
                        <view
                          class="size-5 flex overflow-hidden justify-center items-center -ml-2 bg-gray-200 rounded-full border"
                          :style="`z-index: ${5 - k};`"
                          v-for="(i, k) in d?.purchased_users.slice(0, 3)"
                          :key="k"
                        >
                          <image
                            :src="i.avatar ? vk.myfn.handleImageUrl(i.avatar) : '/static/dddr103.png'"
                            class="size-full"
                            mode="aspectFill"
                          />
                        </view>
                      </view>
                      <view class="text-[.75rem] text-[#00A9AB]" v-if="Number(d.sold_count)">
                        {{ d.sold_count }}人已解锁此钓点
                      </view>
                      <view class="text-[.75rem] text-[#00A9AB]" v-else>解锁此钓点查看视频指路</view>
                    </view>
                  </view>
                </view>
              </view>

              <view
                class="flex gap-1 justify-between items-center"
                v-if="!d.is_paid_spot || (d.is_paid_spot && d.is_paid)"
                @click="goHere"
              >
                <view class="flex flex-col gap-1 justify-between">
                  <view class="text-[.875rem] text-[#171B24] line-clamp-1 font-medium"> {{ d.location_name }}</view>
                  <view class="flex gap-1 items-center">
                    <view class="flex-none">
                      <u-icon name="map-fill" color="#919499" size="28"></u-icon>
                    </view>
                    <view class="text-[.75rem] text-[#919499] line-clamp-1">{{ d.address }}</view>
                  </view>
                </view>
                <view class="size-[2rem] bg-[#E5F6F6] rounded-full flex-none">
                  <u-image src="/static/dddr52.png" class="!size-full" mode="aspectFill" />
                </view>
              </view>
            </view>
          </view>

          <!-- 钓点信息 -->
          <view class="px-4">
            <view class="flex flex-col gap-4 p-4 bg-[#FFFFFF] rounded-[.75rem] relative overflow-hidden">
              <view class="font-semibold text-[1rem] text-[#171B24]">钓点攻略</view>
              <view class="bg-[#F4F6F8] rounded-[.5rem] p-4 flex justify-between">
                <view class="text-[.75rem] text-[#606368]">渔政监管</view>
                <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d?.supervise }}</view>
              </view>
              <view v-if="d.basan_type == 1" class="flex relative flex-col gap-4">
                <!-- 需要付费且未付费时显示遮罩层 -->
                <view
                  class="size-full absolute inset-0 ounded-[.5rem] overflow-hidden"
                  v-if="d.is_paid_spot && !d.is_paid && vk.getVuex('$user.userInfo.id') !== d?.user?.id"
                >
                  <view class="size-full absolute z-10 backdrop-blur-sm"> </view>
                  <view class="size-full flex absolute z-20 flex-col gap-3 justify-center items-center">
                    <image src="/static/dddr25.png" mode="aspectFill" class="size-11" />
                    <view class="text-[.875rem] text-[#5C6068]">解锁后查看钓点全部信息 </view>
                    <view
                      class="btn bg-[#141926] h-[2.5rem] text-[.875rem] text-[#FFFFFF] rounded-[.625rem] px-5 flex items-center"
                      @click="buyNow"
                    >
                      立即解锁
                    </view>
                  </view>
                </view>
                <view class="bg-[#F4F6F8] rounded-[.5rem] p-4 flex justify-between">
                  <view class="text-[.75rem] text-[#606368]">作钓方式</view>
                  <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d?.ext?.fish_type?.name }}</view>
                </view>
                <view class="bg-[#F4F6F8] rounded-[.5rem] p-4 flex justify-between">
                  <view class="text-[.75rem] text-[#606368]">钓竿长度</view>
                  <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d?.ext?.rod_length?.name }}/m</view>
                </view>

                <view class="flex flex-col gap-2 bg-[#F4F6F8] rounded-[.5rem] p-4">
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">主线长</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d.main_line_length }}m</view>
                  </view>
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">主线粗</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d.main_line_size }}#</view>
                  </view>
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">子线粗</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d.sub_line_size }}#</view>
                  </view>
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">鱼钩类型</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d?.ext?.fish_hook_type?.name }}</view>
                  </view>
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">鱼钩大小</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d?.fish_hook_size }}#</view>
                  </view>
                </view>
                <view class="flex flex-col gap-2 bg-[#F4F6F8] rounded-[.5rem] p-4">
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">浮漂类型</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d?.ext?.float_type?.name }}</view>
                  </view>
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">铅重</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d.float_lead_weight }}g</view>
                  </view>
                </view>
                <view class="flex flex-col gap-2 bg-[#F4F6F8] rounded-[.5rem] p-4">
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">饵料</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d?.ext?.bait_name?.name }}</view>
                  </view>
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">开饵水比</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium"
                      >{{ d.bait_water_ratio_min }} : {{ d.bait_water_ratio_max }}
                    </view>
                  </view>
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">饵料状态</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d?.ext?.bait_status?.name }}</view>
                  </view>
                </view>
              </view>
              <view v-if="d.basan_type == 2" class="flex relative flex-col gap-4">
                <!-- 需要付费且未付费时显示遮罩层 -->
                <view
                  class="size-full absolute inset-0 ounded-[.5rem] overflow-hidden"
                  v-if="d.is_paid_spot && !d.is_paid && vk.getVuex('$user.userInfo.id') !== d?.user?.id"
                >
                  <view class="size-full absolute z-10 backdrop-blur-sm"> </view>
                  <view class="size-full flex absolute z-20 flex-col gap-3 justify-center items-center">
                    <image src="/static/dddr25.png" mode="aspectFill" class="size-11" />
                    <view class="text-[.875rem] text-[#5C6068]"> 解锁后查看钓点全部信息 </view>
                    <view
                      class="btn bg-[#141926] h-[2.5rem] text-[.875rem] text-[#FFFFFF] rounded-[.625rem] px-5 flex items-center"
                      @click="buyNow"
                    >
                      立即解锁
                    </view>
                  </view>
                </view>
                <view class="bg-[#F4F6F8] rounded-[.5rem] p-4 flex justify-between">
                  <view class="text-[.75rem] text-[#606368]">作钓类型</view>
                  <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d?.ext?.fish_type?.name }}</view>
                </view>
                <view class="flex flex-col gap-2 bg-[#F4F6F8] rounded-[.5rem] p-4">
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">建议钓组</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d?.ext?.fish_group?.name }}</view>
                  </view>
                  <view class="flex justify-between">
                    <view class="text-[.75rem] text-[#606368]">建议用饵</view>
                    <view class="text-[.8125rem] text-[#171B24] font-medium">{{ d?.ext?.bait_name?.name }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 评论信息 -->
          <view class="px-4" v-if="d.total_comment">
            <view class="flex flex-col gap-4 p-4 bg-[#FFFFFF] rounded-[.75rem]">
              <view class="flex justify-between items-center">
                <view class="flex gap-1 items-center">
                  <view class="text-[.9375rem] text-[#161A24] font-bold">钓友评价</view>
                  <view class="text-[.6875rem] text-[#8E9299]">{{ d.total_comment }}条</view>
                </view>
                <view class="flex gap-[.125rem] items-center" @click="toComment">
                  <view class="text-[.6875rem] text-[#8E9299]">查看全部</view>
                  <image src="/static/dddr58.png" class="size-3" mode="aspectFill" />
                </view>
              </view>
              <view v-for="(i, k) in commentData" :key="k" class="flex gap-1 justify-between">
                <view
                  class="size-6 border-[.0625rem] border-solid border-[#F2F5F7] rounded-full overflow-hidden first-letter: flex-none"
                  @click="vk.navigateTo(`/pages/my/otherIndex?id=${i.user_id}`)"
                >
                  <image class="size-full" :src="i?.user?.avatar" mode="aspectFill" />
                </view>
                <view class="flex flex-col flex-1">
                  <view class="flex gap-1 items-center">
                    <view class="text-[.75rem] text-[#5C6068] line-clamp-1"> {{ i?.user?.nickname || '-' }} </view>
                    <view class="text-[.625rem] text-[#C0C4CC] whitespace-nowrap"> {{ i.create_time_str }} </view>
                  </view>
                  <view class="flex justify-between items-start">
                    <view class="text-[.8125rem] text-[#161A24] line-clamp-1 w-[80%]">{{ i.content }}</view>
                    <view class="flex gap-1 items-center" @click="changeGood(i)">
                      <image src="/static/dddr8.png" class="size-4" mode="aspectFill" v-if="i.is_like" />
                      <image src="/static/dddr7.png" mode="aspectFill" class="size-4" v-if="!i.is_like" />
                      <view class="text-[.5625rem] text-[#8E9299]" v-if="i.like_num">{{ i.like_num }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 提示信息 -->
          <view class="flex justify-center text-[.625rem] text-[#C1C4C9]">
            以上信息由用户上传制定，具体以实际情况为准
          </view>
        </view>
      </view>
      <!-- 底部 -->
      <template #bottom>
        <view class="pb-env bg-white rounded-t-[.75rem] overflow-hidden">
          <view class="bg-white" v-if="!vk.pubfn.isNull(d)">
            <view class="flex justify-between px-4 py-3 rounded-t-[1rem] z-10 items-center">
              <view class="flex gap-4 items-center">
                <!-- 收藏   被用户拉黑后无法进行收藏了-->
                <template v-if="vk.getVuex('$user.userInfo.id') !== d?.user?.id && !d?.to_blacklist">
                  <view class="flex flex-col gap-1 justify-center items-center" @click="collectionJudgment">
                    <view class="size-[1.5rem]">
                      <image src="/static/dddr12.png" class="!size-full" v-if="d.is_collection" mode="aspectFill" />
                      <image src="/static/dddr11.png" class="!size-full" v-else mode="aspectFill" />
                    </view>
                    <view class="text-[.625rem] text-[#171B24] font-medium">
                      {{ d.is_collection ? '已收藏' : '收藏' }}
                    </view>
                  </view>
                </template>

                <!--分享 -->
                <view class="flex flex-col gap-1 justify-center items-center" @click="shareApp">
                  <view class="w-[1.5rem] h-[1.5rem]">
                    <u-image src="/static/dddr37.png" class="!size-full" mode="aspectFill" />
                  </view>
                  <view class="text-[.625rem] text-[#171B24] font-medium">分享</view>
                </view>
                <!-- 评价  -->
                <template v-if="vk.getVuex('$user.userInfo.id') !== d?.user?.id && !d?.to_blacklist">
                  <view
                    class="flex flex-col gap-1 justify-center items-center"
                    v-if="!d.is_paid_spot || (d.is_paid_spot && d.is_paid)"
                    @click="openEvaluation"
                  >
                    <view class="w-[1.5rem] h-[1.5rem]">
                      <u-image src="/static/dddr20.png" class="!size-full" mode="aspectFill" />
                    </view>
                    <view class="text-[.625rem] text-[#171B24] font-medium">评价</view>
                  </view>
                </template>
              </view>
              <!-- 到这去 -->

              <view
                @click="goHere"
                class="px-6 h-[2.5rem] bg-[#E6F7F7] flex items-center rounded-[.625rem] gap-1"
                v-if="!d?.is_paid_spot || d?.is_paid || vk.getVuex('$user.userInfo.id') == d?.user?.id"
              >
                <image class="size-3" src="/static/dddr53.png" mode="aspectFill" />
                <view class="font-medium text-[.875rem] text-[#01A9AB]">导航前往</view>
              </view>
              <!-- 收费按钮 -->
              <template v-if="d.is_paid_spot && !d.is_paid && vk.getVuex('$user.userInfo.id') !== d?.user?.id">
                <view v-if="d.is_paid_spot && !d.is_paid" @click="buyNow">
                  <yy-amountBtn :paid_amount="d.paid_amount"></yy-amountBtn>
                </view>
              </template>
            </view>
          </view>
        </view>
      </template>
    </yy-paging>
    <!-- 分享  举报弹框 -->
    <yy-share
      :shareList="shareList"
      :showShare="showShare"
      @update:showShare="showShare = $event"
      @handleShare="handleShare"
    ></yy-share>
    <!-- 评论组件 -->
    <yy-comment
      :showComment="showComment"
      @submitComment="submitComment"
      @update:showComment="showComment = $event"
    ></yy-comment>
    <!--  付费 -->
    <yy-buy
      v-model="modelValue"
      :modelValueData="modelValueData"
      @update:modelValue="modelValue = $event"
      @paySuccess="paySuccess"
    ></yy-buy>
    <yy-alert ref="alert" @alertConfirm="alertConfirm"></yy-alert>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        d: {}, // 详情数据
        automatic: false, // 是否自动播放
        showShare: false, // 是否显示分享
        showComment: false, // 是否显示评论
        shareList: [], // 分享列表
        id: '', // 钓点ID
        currentImage: 0, // 当前图片索引
        covers: [], // 封面图片列表
        title: '', // 标题
        value: 5, // 评分值
        modelValue: false, // 模态框显示状态
        commentData: [], // 评论数据
        modelValue: false, // 是否显示购买弹窗
        modelValueData: {} // 购买弹窗数据
      }
    },
    onLoad(options) {
      this.id = options.id
    },
    onShow() {
      setTimeout(() => {
        this.$refs.paging.reload()
      }, 0)
    },
    onPageScroll(e) {
      this.isScroll = e.scrollTop > 230
      e.scrollTop > 320 ? (this.title = this.d.name) : (this.title = '')
    },
    onPageUnload() {},

    methods: {
      openEvaluation() {
        if (!vk.myfn.isLogin()) return
        this.showComment = true
      },
      returnToPage(isDeleted) {
        if (isDeleted) {
          // 删除单个数据
          uni.$emit('returnUpdatedData', { id: this.id })
          vk.navigateBack()
        } else {
          // 更新单个数据
          uni.$emit('returnUpdatedData', { ...this.d })
          vk.navigateBack()
        }
      },
      goToHisHomepage() {
        // 获取页面栈
        const pages = getCurrentPages()

        // 检查是否有上一个页面
        if (pages.length > 1) {
          const prevPage = pages[pages.length - 2] // 获取上一个页面
          const prevRoute = prevPage.route

          // 如果上个页面是 /pages/my/otherIndex，则不进行跳转
          if (prevRoute === 'pages/my/otherIndex') {
            console.log('上个页面是 otherIndex，不进行跳转')
            return
          }
        }

        // 如果不是从 otherIndex 页面来的，则正常跳转
        vk.navigateTo(`/pages/my/otherIndex?id=${this.d?.user?.id}`)
      },
      async alertConfirm() {
        let res = await api.deleteBasan({
          id: this.id
        })
        if (!res.code) return
        vk.toast(res.msg, 'none')
        this.returnToPage(true)
      },
      previewImage() {
        // 检查图片数据是否存在
        if (!this.d.images || this.d.images.length === 0) {
          vk.toast('暂无图片可预览')
          return
        }

        // 使用 vk.myfn.previewImage 方法预览图片
        vk.myfn.previewImage({
          urls: this.d.images,
          current: this.currentImage
        })
      },
      buyNow() {
        if (vk.myfn.isLogin()) {
          this.modelValue = true
          this.modelValueData = this.d
        }
      },
      paySuccess() {
        this.$refs.paging.reload()
      },
      fullScreenPlayback(video) {
        vk.navigateTo('/pages/index/fullscreen?video=' + video)
      },
      async changeGood(i) {
        if (this.d.to_blacklist) {
          vk.toast('操作失败，暂无权限')
          return
        }

        vk.pubfn.debounce(async () => {
          // 保存原始状态用于回滚
          const originalIsLike = i.is_like
          const originalLikeNum = i.like_num || 0

          // 乐观更新：立即更新UI状态
          i.is_like = !i.is_like

          // 更新点赞数量
          if (i.is_like) {
            // 点赞：数量+1
            i.like_num = originalLikeNum + 1
          } else {
            // 取消点赞：数量-1，但不能小于0
            i.like_num = Math.max(0, originalLikeNum - 1)
          }

          try {
            const res = await api.commentLike({
              comment_id: i.id
            })

            if (!res.code) {
              // 接口失败，回滚状态
              i.is_like = originalIsLike
              i.like_num = originalLikeNum
              return
            }

            // 可选：使用服务器返回的最新数据更新状态
            if (res.data && typeof res.data.is_like !== 'undefined') {
              i.is_like = res.data.is_like
              i.like_num = res.data.like_num || i.like_num
            }
          } catch (error) {
            i.is_like = originalIsLike
            i.like_num = originalLikeNum
          }

          // 移除页面刷新，因为已经实现了乐观更新
          // this.$refs.paging.refresh()
        }, 500)
      },
      async submitComment(e) {
        let obj = {
          basan_id: this.id,
          content: e.content,
          score: e.rating
        }
        let res = await api.addComment(obj)
        vk.toast(res.msg, 300, e => {
          this.showComment = false
          this.$refs.paging.refresh()
        })
      },
      to7DayWeather() {
        if (!this?.d?.adcode) return
        vk.navigateTo('/pages/index/7DayWeather?adcode=' + this?.d?.adcode)
      },
      toComment() {
        vk.navigateTo({
          url: '/pages/index/allReviews?id=' + this.id
        })
      },

      async getCommentList() {
        let res = await api.getCommentList({
          basan_id: this.id
        })

        this.commentData = res.data
      },
      // 分享
      shareApp() {
        vk.myfn.shareWithSystem()
      },
      collectionJudgment() {
        vk.pubfn.debounce(() => {
          !this.d.is_collection ? this.collect() : this.delCollect()
        }, 500)
      },
      openShare() {
        this.showShare = true
      },
      switchImages(k) {
        let d = [0, 1, 2].includes(k)
        if (d) return (this.currentImage = k)
        vk.myfn.previewImage({
          urls: this.d.images,
          current: 0
        })
      },
      async queryList(page, limit) {
        this.getCommentList()
        this.shareList = []

        // 获取钓点详情
        const res = await api.getBasanDetail({
          id: this.id,
          lat: vk.getVuex('$user.positioning')?.lat || '',
          lng: vk.getVuex('$user.positioning')?.lng || ''
        })

        // 初始化分享列表
        const defaultShareItems = [
          {
            name: '复制链接',
            icon: 'dddr43'
          }
        ]

        const isCurrentUser = res.data.user_id === vk.getVuex('$user.userInfo.id')

        // 根据用户身份添加操作按钮
        if (isCurrentUser) {
          // 自己的钓点
          defaultShareItems.push(
            {
              name: '编辑',
              icon: 'dddr123'
            },
            {
              name: '删除',
              icon: 'dddr44'
            }
          )
        } else {
          // 不是自己的钓点
          defaultShareItems.push(
            {
              name: '举报钓点',
              icon: 'dddr56'
            },
            {
              name: '不感兴趣',
              icon: 'dddr107'
            }
          )
        }

        this.shareList = defaultShareItems
        this.d = res.data
        this.$refs.paging.complete([''])
      },

      // 收藏
      async collect() {
        if (!vk.myfn.isLogin()) return

        // 乐观更新：立即更新UI状态
        const originalState = this.d.is_collection
        this.d.is_collection = true
        let res = await api.collect({
          id: this.id
        })
        if (!res.code) {
          // 接口失败，回滚状态
          this.d.is_collection = originalState
          vk.toast(res.msg, 'none')
          return
        }
        vk.toast('收藏成功')
        // this.$refs.paging.reload()
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 240
      },

      //删除收藏
      async delCollect() {
        if (!vk.myfn.isLogin()) return

        // 乐观更新：立即更新UI状态
        const originalState = this.d.is_collection
        this.d.is_collection = false
        let res = await api.collectDelete({
          id: this.id
        })
        if (!res.code) {
          // 接口失败，回滚状态
          this.d.is_collection = originalState
          vk.toast(res.msg, 'none')
          return
        }

        // this.$refs.paging.reload()
      },
      // 删除钓点
      async deleteFishingSpot() {
        this.$refs.alert.config({
          show: true,
          title: '删除确认',
          describe: '删除后将无法恢复，是否确认删除此钓点?',
          cancel: '取消',
          cancelColor: '#000',
          confirm: '删除',
          confirmColor: '#FF3A56',
          eventType: 'cancelBlackout'
        })
      },
      // 复制链接
      async copyLink() {
        vk.myfn.copyToClipboard('https://www.diaodiandaren.com/api/page/download?server=true').then(() => {
          vk.toast('复制成功')
        })
      },
      async handleShare(item) {
        this.showShare = false
        console.log('9999==> ', 9999)
        // 使用 switch 语句优化分支逻辑
        switch (item.name) {
          case '删除':
            if (!vk.myfn.isLogin()) return
            await this.deleteFishingSpot()
            break
          case '举报钓点':
            if (!vk.myfn.isLogin()) return
            vk.navigateTo(`/pages/my/report?id=${this.id}&type=1`)
            break
          case '复制链接':
            await this.copyLink()
            break
          case '不感兴趣':
            if (!vk.myfn.isLogin()) return

            this.blockUsers()
            // TODO: 实现微信好友分享
            break
          case '微信朋友圈':
            // TODO: 实现朋友圈分享
            break
          case 'QQ好友':
            // TODO: 实现QQ好友分享
            break
          case 'QQ空间':
            // TODO: 实现QQ空间分享
            break
          case '编辑':
            if (!vk.myfn.isLogin()) return

            this.fishSpeciesEditing()
            break

          default:
            console.log('未处理的分享类型:', item.name)
        }
      },
      //vk.navigateTo('/pages/index/details?id=' + i.id)
      async blockUsers() {
        let res = await api.notInterest({
          basan_id: this.id
        })
        vk.toast('操作成功，已减少此类内容推荐', 500, e => {
          this.returnToPage(true)
        })
      },
      fishSpeciesEditing() {
        let that = this

        let basan_type = this.d.basan_type
        let id = this.d.id
        vk.navigateTo({
          url: basan_type == 1 ? `/pages/index/release?id=${id}&isEdit=true` : `/pages/index/lure?id=${id}&isEdit=true`
        })
      },
      async goHere() {
        try {
          const { lat: latitude, lng: longitude, address: name } = this.d
          if (!latitude || !longitude) {
            return vk.toast('位置信息不完整', 'none')
          }
          await vk.myfn.openMap(latitude, longitude, name)
        } catch (error) {
          console.error('打开地图失败:', error)
          vk.toast('打开地图失败', 'none')
        }
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f4f6f8 !important;
  }

  .paid-overlay::before {
    content: '';
    position: absolute;
    inset: 0;

    background-color: #3b5267;
    backdrop-filter: blur(0.5rem);
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .paid-overlays::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, #f5f8fa 100%);
    border-radius: 0.75rem;
  }
</style>
